<template>
  <div class="info-box">
    <el-row class="info-header">
      <el-col><h3>您好！欢迎您来到特步</h3></el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="info-body">
      <el-col><h2>个人信息中心</h2></el-col>
    </el-row>
    <el-row type="flex" justify="start" class="info-content">
      <el-col :span="14" :offset="1" class="content-text">
        <p>账号：{{name}}</p>
        <p>当前余额：{{balance | keepTwoNum}}</p>
        <p>真实姓名：{{name}}</p>
        <p>会员性别：{{sexArry[sex]}}</p>
        <p>创建时间：{{create_time}}</p>
        <p>手机号码：{{phone}}</p>
      </el-col>
      <el-col :span="8" class="content-img"><img :src="head_url" class="head-url"/></el-col>
    </el-row>
    <el-row type="flex" justify="center" class="info-btn">
      <el-col :span="6"><el-button type="primary" size="medium" @click="findOldUser">修改资料</el-button></el-col>
      <el-col :span="6"><el-button type="danger" size="medium" @click="show1=true">修改密码</el-button></el-col>
    </el-row>
    <el-dialog
      title="修改资料"
      :before-close="handleClose"
      :visible.sync="show"
      ref="drawer1"
      custom-class="demo-drawer"
      width="25%"
      >
      <div class="demo-drawer__content">
        <el-form ref="updateUser" :model="params" :rules="rules" resetFields>
          <el-form-item label="账号">
            <el-input disabled v-model="params.account"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            <el-input placeholder="请输入昵称" v-model="params.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="params.sex">
                <el-radio :label="0">保密</el-radio>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="用户头像">
            <el-upload
              :data="uploadData"
              action="shoes_Web_exploded/User/updateUserPictrue"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input placeholder="请输入手机号码" v-model="params.phone"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm1">取 消</el-button>
          <el-button type="primary" @click="updateUser('updateUser')">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="修改密码"
    :before-close="handleClose"
    :visible.sync="show1"
    ref="drawer"
    width="25%"
    custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <el-form>
          <el-form-item label="旧密码">
            <el-input placeholder="请输入旧密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码">
            <el-input placeholder="请输入再次输入新密码"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm2">取 消</el-button>
          <el-button type="primary" @click="cancelForm2">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
export default {
  filters: {
    keepTwoNum (value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data () {
    let checkPhone = (rule, value, callback) => {
      let phoneReg = /^1[3456789]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('手机号格式不正确!'))
      }
      callback()
    }
    return {
      action: {
        selectUserByid: 'shoes_Web_exploded/User/selectUserById',
        updateUser: 'shoes_Web_exploded/User/updateUser'
      },
      userId: '',
      name: '',
      account: '',
      balance: 0,
      create_time: '',
      sex: 0,
      sexArry: ['保密', '男', '女'],
      phone: '',
      show: false,
      show1: false,
      radio: 1,
      head_url: '',
      uploadData: {
        user_id: null
      },
      params: {
        user_id: null,
        account: '',
        name: '',
        password: '',
        phone: '',
        state: 0,
        sex: 0,
        version: null
      },
      rules: {
        name: [
          {
            required: true, message: '姓名不能为空', trigger: 'blur'
          }],
        phone: [
          {
            required: true, message: '手机号不能为空', trigger: 'blur'
          },
          {
            validator: checkPhone, trigger: 'blur'
          }]
      }
    }
  },
  components: {

  },
  computed: {

  },
  methods: {
    getUserId () {
      this.userId = sessionStorage.getItem('user_id')
    },
    updateUser (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          let params = this.params
          console.log(params)
          http.xhrPost(this, this.action.updateUser, params, (res) => {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.params = {
              user_id: null,
              account: '',
              name: '',
              password: '',
              phone: '',
              state: 0,
              sex: 0,
              version: null
            }
            this.show = false
            this.getUserInfo()
          })
        }
      })
    },
    findOldUser () {
      this.show = true
      this.uploadData.user_id = this.userId
      http.xhrPost(this, this.action.selectUserByid + '/' + this.userId, null, (res) => {
        this.params.account = res.data.account
        this.params.password = res.data.password
        this.params.phone = res.data.phone
        this.params.name = res.data.name
        this.params.state = res.data.state
        this.params.sex = res.data.sex
        this.params.version = res.data.version
        this.params.user_id = res.data.user_id
      })
    },
    getUserInfo () {
      http.xhrPost(this, this.action.selectUserByid + '/' + this.userId, null, (res) => {
        this.name = res.data.name
        this.sex = res.data.sex
        this.phone = res.data.phone
        this.account = res.data.account
        this.balance = res.data.balance
        this.create_time = res.data.create_time
        this.head_url = res.data.head_url
        console.log(res)
      })
    },
    handleClose (done) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true
          this.timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch(_ => {})
    },
    cancelForm1 () {
      this.loading = false
      this.show = false
      clearTimeout(this.timer)
    },
    cancelForm2 () {
      this.loading = false
      this.show1 = false
      clearTimeout(this.timer)
    },
    handleRemove (file) {
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  },
  mounted () {
    this.getUserId()
    this.getUserInfo()
  }
}
</script>

<style lang="scss">
  @import '../../assets/style/common.scss';
  .info-box {
    .info-header {
      h3 {
      color: #C40000;
      line-height: 30px;
      font-size: 14px;
      font-weight: normal;
      }
    }
    .info-body {
      h2 {
        font-size: 24px;
        font-weight: bold;
        color: #727272;
      }
    }
    .info-content {
      margin-top: 40px;
      .head-url {
        height: 150px;
        width: 150px;
      }
      .content-text {
        p {
          font-size: 12px;
          color: #727272;
          height: 50px;
        }
      }
    }
  }
</style>
